<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Template • TodoMVC</title>
    <link rel="stylesheet" href="node_modules/todomvc-common/base.css" />
    <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css" />
  </head>
  <body>
    <section class="todoapp" id="app">
      <header class="header">
        <h1>待办事项</h1>
        <input class="new-todo" placeholder="添加新任务" autofocus />
      </header>
      <section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox" />
        <label for="toggle-all">全选</label>
        <ul class="todo-list">
          <!-- 
          li默认是未完成状态
          li的类名如果设置为editing,则当前是编辑状态
          li的类名如果设置为completed，则是完成状态 -->
          <li class="completed">
            <div class="view">
              <input class="toggle" type="checkbox" checked />
              <label>吃饭</label>
              <button class="destroy"></button>
            </div>
            <input class="edit" value="吃饭" />
          </li>
          <li>
            <div class="view">
              <input class="toggle" type="checkbox" />
              <label>睡觉</label>
              <button class="destroy"></button>
            </div>
            <input class="edit" value="睡觉" />
          </li>
        </ul>
      </section>

      <footer class="footer">
        <span class="todo-count"><strong>0</strong> 剩余数量</span>
        <button class="clear-completed">清除所有已完成</button>
      </footer>
    </section>

    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          list: [
            // done代表的是任务是否完成 默认情况下新任务是未完成的
            { id: 1, name: "吃饭", done: false },
            { id: 2, name: "睡觉", done: true },
            { id: 3, name: "打豆豆", done: false },
          ],
          //新任务名字
          name: "",
        },
      });
    </script>
  </body>
</html>
